@import '@common/styles/index.scss';

.payBox {
  background: $white;
  padding: rem($padding-6n) rem($padding-4n) rem($padding-4n) rem($padding-4n);
  min-height: 337px;
  box-sizing: border-box;

  .moneyUnit {
    font-size: $font-size-large;
  }
  .title {
    text-align: center;
    font-size: 30px;
    font-weight: 600;
  }

  .list {
    margin-top: $margin-2n;
    :global {
      .dzq-checkbox-wrap {
        padding: 0;
      }
      .is-checked {
        border: none;
        .dzq-checkbox--radio {
          &::after {
            border: none;
          }
        }
      }
    }
    .listItem {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: $padding-4n 0;
      &:first-child {
        border-bottom: 1px solid $paybox-border-line-color;
      }
      .left {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-shrink: 0;
        .icon {
          margin-right: $margin-2n;
        }
        .text {
          font-size: $font-size-primary;
          color: $text-color-primary;
        }
      }
      .right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 1;
        word-break: break-all;
        .subText {
          font-size: $font-size-label;
          color: $text-color-secondary;
          margin-right: $margin-4n;
        }
        :global {
          .dzq-checkbox--radio {
            border-radius: $border-radius-small;
            &::after {
              border-radius: $border-radius-small;
            }
          }
          .dzq-icon {
            font-size: 10px !important;
          }
        }
      }
    }
  }
  .tips {
    padding: $padding-2n 0;
    text-align: center;
    font-size: $font-size-primary;
    color: $text-color-secondary;
  }

  .btnBox {
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: $padding-2n $padding-4n $padding-10;
    padding-bottom: calc(16px + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
    padding-bottom: calc(16px + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
    &::before {
      content: '';
      display: block;
      // width: 100%;
      height: 1px;
      background: $border-color;
      position: relative;
      top: -8px;
      margin: 0 rem(-$margin-4n);
    }

    .btn {
      height: 42px;
      font-size: $font-size-middle;
      border-radius: 5px;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 42px;
    }
  }
}

.payBoxCloseIcon {
  position: absolute;
  right: 3px;
  top: 5px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: $text-color-secondary;
  cursor: pointer;
}
